/**
 * Created by Administrator on 2017/4/6 0006.
 */
var React = require('react');


var Bheader = require('../widget/Bheader');
var OrderPro = require('../widget/OrderPro');
var ajax = require('../tools/ajax');
var MsgBox = require('../components/MsgBox');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            currentIndex:"1",
        }
    },
    myScroll:"",

    componentDidMount: function () {
        this.getOrderALL();
        setTimeout(this.iscroll,500);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#orderWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
        p.myScroll.refresh();
    },
    //根据userid获取订单信息
    // shipping_status：商品配送情况;0未发货,1已发货,2已收货,4退货
    // pay_status：支付状态;0未付款;1付款中;2已付款

    //全部
    getOrderALL(){
        var p=this;
        this.setState({currentIndex:"1"});
        this.refs.orderPro.setState({
            currentIndex:"1"
        },()=>{
            p.refs.orderPro.getOrderByUserId();
        });
    },
    //待支付
    getOrderDZF(){
        var p=this;
        this.setState({currentIndex:"2"});
        this.refs.orderPro.setState({
            currentIndex:"2"
        },()=>{
            p.refs.orderPro.getOrderByUserId();
        });
    },
    //待发货
    getOrderDFH(){
        var p=this;
        this.setState({currentIndex:"3"});
        this.refs.orderPro.setState({
            currentIndex:"3",
        },()=>{
            p.refs.orderPro.getOrderByUserId();
        });
    },
    //待收货
    getOrderDSH(){
        var p=this;
        this.setState({currentIndex:"4"});
        this.refs.orderPro.setState({
            currentIndex:"4"
        },()=>{
            p.refs.orderPro.getOrderByUserId();
        });
    },
    //待评论
    getOrderDPL(){
        var p=this;
        this.setState({currentIndex:"5"});
        this.refs.orderPro.setState({
            currentIndex:"5",
        },()=>{
            p.refs.orderPro.getOrderByUserId();
        });
    },
    /**提示框*/
    MsgBox(){
        var word = this.refs.orderPro.state.word;
        if(word){
            this.refs.MsgBox.setState({
                type: "no",
                timeout:1000,
                show:true,
                word:word
            })
        }
    },
    render: function () {
        var p = this;
        return (
            <div className="main"  id="main">
                <Bheader theme={this.state.theme} title="我的订单" headr="false" hact="#wode"></Bheader>
                <div className="container-t">
                    <ul className="orderNav">
                        <li onClick={p.getOrderALL} style={{color:p.state.currentIndex == "1" ? "red" : "gray"}}>全部</li>
                        <li onClick={p.getOrderDZF} style={{color:p.state.currentIndex == "2" ? "red" : "gray"}}>待支付</li>
                        <li onClick={p.getOrderDFH} style={{color:p.state.currentIndex == "3" ? "red" : "gray"}}>待发货</li>
                        <li onClick={p.getOrderDSH} style={{color:p.state.currentIndex == "4" ? "red" : "gray"}}>待收货</li>
                    </ul>
                    <hr className="orderHr"/>
                </div>
                <div id="orderWrapper" className="orderWrap">
                    <div style={{minHeight:"28.8rem"}}>
                    <OrderPro ref="orderPro" MsgBox={p.MsgBox}></OrderPro>
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});